import React from 'react';
import {Form, Input, Button, Select, DatePicker, Upload, Icon, Checkbox, InputNumber, Row, Col, Message, Modal, Collapse  } from 'antd';
import Region from '../../../components/Region/Region';
import bankJson from '../../../components/bankType/bankTypeJson.js';
import ItemTable from './contractList';
const FormItem = Form.Item;
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
const Panel = Collapse.Panel;
var data = require('../../../../src/components/Region/chinaRegion')
 var credentialImg = [];
let uuid = 0;
function noop() {
  return false;
}

let Add = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      loading: false,
      imgList: [],
      activeKey: '1',
      setContract: {},
      province: '110000',
      city: '110100',
      district: '110101',
      provinceName: '北京市 ', // 省
      cityName: '直辖区',  // 城市
      districtName: '东城区', // 区域
      areaId: '110101',
      isFixed: false,
      startTime: null,
      contractList: [],
      circumFacility: [], //周边设施
      appearance: [], // 图片1
      credential:[], // 房产证
      apartment: [], // 图片2
      contract: [], // 图片3
      other: [],// 图片4
      depositEnable: false, 
      priviewVisible: false,
      priviewImage: '',
      districtDetail: '北京东城区',
      expireTime: '',
      credentialArr: [],
      appearanceArr: [],
      apartmentArr: [],
      contractArr: [],
      otherArr: [],
      isOwn: false,
    }
  },


  componentDidMount(){
     this.getMap();
  },
  // 点击获取地址
  getLocation() {
    let detailAddress = this.props.form.getFieldValue('address');
    this.getMap(detailAddress)
  },
  // 地图
  getMap(detailAddress){
    let _me = this;
    var BMap = window.BMap
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.42211, 39.934477);// 获取覆盖物拖拽当前坐标

    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    var province=_me.state.provinceName;
    var city=_me.state.cityName;
    var district=_me.state.districtName;
    map.setCurrentCity(city);          // 设置地图显示的城市 此项是必须设置的    
    function funMap() {
        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 17);
    } 
    var local = new BMap.LocalSearch(map, {
        onSearchComplete: funMap,
        renderOptions:{map: map}
    });
   
   var address = province + city+ district +detailAddress;
   
    local.setSearchCompleteCallback(function (searchResult) {
    　　var poi = searchResult.getPoi(0);
        _me.props.form.setFieldsValue({'xAxis': !poi ? '116.42211':poi.point.lng})
        _me.props.form.setFieldsValue({'yAxis': !poi ? '39.934477':poi.point.lat})
        !poi ? '':map.centerAndZoom(poi.point, 13);
    });

    local.search(address)  // 根据地址定位   

    map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
    map.enableKeyboard();//启动键盘操作地图  
    
    map.centerAndZoom(point, 11);
    map.addEventListener("click", function(e){
      // console.log('经度:'+e.point.lng+' , 纬度: '+e.point.lat);
      var now_point =  new BMap.Point(e.point.lng, e.point.lat );
      marker.setPosition(now_point);//设置覆盖物位置
      _me.props.form.setFieldsValue({'xAxis':e.point.lng, 'yAxis': e.point.lat})
    });
    var marker = new BMap.Marker(point); //创建marker对象
    marker.enableDragging(); //marker可拖拽
    //拖拽结束事件
    marker.addEventListener("dragend", function(e){
      //获取覆盖物位置
      var o_Point_now =  marker.getPosition();
      var lng = o_Point_now.lng;
      var lat = o_Point_now.lat;
      //e.point.lng 地理经度。
      // e.point.lat 地理纬度。
      //alert(e.point.lng + "---, " + e.point.lat);
      get_lng_lat();
      
    })
    map.addOverlay(marker); //在地图中添加marker
    get_lng_lat();
    //获取经纬度
    function get_lng_lat(){
      //返回覆盖物标注的地理坐标。
      var o_Point_now =  marker.getPosition();
      var lng = o_Point_now.lng;
      var lat = o_Point_now.lat;
      // console.log('经度:'+lng+' , 纬度: '+lat);
      _me.props.form.setFieldsValue({'xAxis':lng, 'yAxis': lat})
    }

  },

  handleSubmit(e) {
    e.preventDefault();
    let form = this.props.form.getFieldsValue();
    let region = {province: this.state.province, city: this.state.city, district: this.state.district};
    let circum = {circumFacility: this.state.circumFacility};
    let contract = {timeList: this.state.contractList};
    let firstRentTime = { firstRentTime: Utils.formatDate(form.firstRentTime) };
    let startTime = { startTime: Utils.formatDate(form.startTime) };
    let expireTime = { expireTime: form.expireTime };
    let districtDetail = {districtDetail: this.state.districtDetail};
    let photos = {pictureList: this.state.appearance.concat(this.state.credential, this.state.apartment, this.state.contract, this.state.other)};
    let params = Object.assign({}, form, circum, region, firstRentTime, startTime, expireTime, photos, contract, districtDetail);
    console.log('收到表单值：', params);
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!'); return; }
        this.setState({
          loading:true
        });
        Utils.sendAjax({
          url: '/tenement/contract/add',
          data: JSON.stringify(params),
          callback: (result)=> {
            if (result.code == 200) {
              this.handleBack();
            } else {
              this.setState({
                loading:false
              });
              Message.error(result.message, 10)
            }
          }
        })
    });
  },

  handleCheckBox(cid){
    let newState = cid;
    this.setState({
      circumFacility: newState
    })
  },

  handleDate(field, value) {
    let t = field.target ? field.target.value : Utils.formatDate(value);
    let name = field.target ? field.target.id : field
    let newTime = this.state.setContract;
    newTime[name] = t;
    this.setState({
      setContract: newTime
    });
    console.log(newTime)
  },

  changeAreaId(area) {
    selectedArea = String(area);

    var selectedProvince = selectedArea.substr(0, 2) + "0000";
    console.log(selectedProvince)
    var selectedCity = selectedArea.substr(0, 4) + "00";
    console.log('selectedCity',selectedCity)
    console.log(selectedArea)
    let citys = data[selectedCity][0] == '市辖区' || data[selectedCity][0] == '县' ? '' : data[selectedCity][0];
    let areas = data[selectedArea][0] == '市辖区' ? '' : data[selectedArea][0];
    let handArea = data[selectedProvince][0]+citys+areas;
    let Provinces = data[selectedProvince][0];
    console.log(Provinces,citys,areas)
    this.setState({
      province: selectedProvince,
      city: selectedCity,
      district: selectedArea,
      areaId: area,
      districtDetail: handArea,
      provinceName: Provinces, // 省
      cityName: citys,  // 城市
      districtName: areas, // 区域
    })
  },
  add() {
    const form = this.props.form.getFieldsValue();
    
    console.log(form)
    let newArr = this.state.contractList;
    if (!(form.rent && form.startTime && form.expireTime)) {
      return Message.warning('请先填写完租金以及合约时间信息', 10);
    }
    let item = {indexForSort: uuid++, rent: form.rent, startTime: Utils.formatDate(form.startTime), expireTime: form.expireTime,totalRent:form.contractPeriod && form.rent ? form.contractPeriod * form.rent : ''};
    newArr.push(item)
    this.setState({
      contractList: newArr,
  
    })
    let obj = {}
    obj['rent'] = ''
    obj['startTime'] = null
    // obj['expireTime'] = null
    this.props.form.setFieldsValue(obj);
    console.log(form);
    console.log(newArr);
  },

  setImgUrl(img) {
    let appearance = [];
    let credential = [];
    let apartment = [];
    let contract = [];
    let other = [];
    let newState = [];
    img.forEach((item, index) => {
      let imgMaps = {
        uid: `tenement-`+index,
        type: item.type,
        status: 'done',
        url: Utils.apiServer + item.url,
        thumbUrl: Utils.apiServer + item.url,
      };
      if (item.type == 'credential') {
        credential.push(imgMaps)
      } else if(item.type == 'appearance') {
        appearance.push(imgMaps)
      } else if (item.type == 'apartment') {
        apartment.push(imgMaps)
      } else if (item.type == 'contract') {
        contract.push(imgMaps)
      } else {
        other.push(imgMaps)
      }
      newState.push(imgMaps);
    })
    this.setState({
      appearance: appearance,
      credential: credential,
      apartment: apartment,
      contract: contract,
      other: other,
      imgList: newState,
    })
  },

  changeWay(e) {
    console.log(e)
    let fix = e == 1 ? false : true;
    this.setState({
      isFixed: fix,

    })
  },

  synchronData(data) {
    console.log(data)
    this.setState({
      contractList: data
    })
  },

  handleCancel() {
    this.setState({
      priviewVisible: false,
    });
  },

  handleDeposit(value) {
    let flag = value == -1 ? true : false;
    this.setState({
      depositEnable: flag
    })
  },

  deleteImg(file) {
    let newArr = [];
    let credentialPic = [];
    let appearancePic = [];
    let apartmentPic = [];
    let contractPic = [];
    let otherPic = [];
    let credentialArr = this.state.credentialArr;
    let appearanceArr = this.state.appearanceArr;
    let apartmentArr = this.state.apartmentArr;
     let contractArr = this.state.contractArr;
     let otherArr = this.state.otherArr;
    let imgs = this.state.imgList;
    imgs.forEach((img, index)=> {
      if (img.url && img.url !== file.url) {
        newArr.push(img)
      }
    })
    console.log(credentialImg)
    credentialArr.forEach((i,index)=> {
      if(i.url[0] && i.url[0] !== file.url){
        credentialPic.push(i)
      }
    })
    appearanceArr.forEach((o,index)=> {
      if(o.url[0] && o.url[0] !== file.url){
        appearancePic.push(o)
      }
    })
     apartmentArr.forEach((p,index)=> {
      if(p.url[0] && p.url[0] !== file.url){
        apartmentPic.push(p)
      }
    })
      contractArr.forEach((p,index)=> {
      if(p.url[0] && p.url[0] !== file.url){
        contractPic.push(p)
      }
    })
      otherArr.forEach((p,index)=> {
      if(p.url[0] && p.url[0] !== file.url){
        otherPic.push(p)
      }
    })
    console.log(credentialPic)
    this.setState({
      imgList: newArr,
      credentialArr: credentialPic,
      appearanceArr: appearancePic,
      apartmentArr: apartmentPic,
      contractArr: contractPic,
      otherArr: otherPic
    })
    this.setImgUrl(newArr);
  },

  handleBack() {
  
    this.context.router.push('/landlord/houseResource/list');
  },

  handleCollapse(e) {
    this.setState({activeKey: e})
  },
  changeRent(value) {
    console.log(value);
    this.setState({

    })
  },
  handleTime(val) {
    
    this.setState({
      startTime: val
    })
  },

  floor(rule, value, callback) {
    const { validateFields } = this.props.form;
    if (!value) {
      value = '';
    }
    if (!!value && value.match(/^\+?[1-9][0-9]*$/g)) {
      callback();
    } else {
      callback('请输入大于0的整数');
    }
    if (value) {
      validateFields(['totalFloor'], {force: true});
    }
    callback();
  },

  totalFloor(rule, value, callback) {

    const { getFieldValue } = this.props.form;
    if (!value) {
      value = '';
    }
    if (!!value && value.match(/^\+?[1-9][0-9]*$/g)) {
      if (value && value < parseInt(getFieldValue('floor'))) {
        callback('总楼层不能小于楼层数');
      } else {
        callback();
      }
    } else {

      callback('请输入大于0的整数');
    }
  },

  handleChangeType(value) {
    this.setState({
      isOwn: value === 'own' ? true : false
    })
  },

  render() {
    let _me = this;
    
    const { getFieldProps } = this.props.form;
    const options = [
      {label: '公交车站', value: '1'},
      {label: '幼儿园', value: '2'},
      {label: '小学', value: '3'},
      {label: '中学', value: '4'},
      {label: '银行', value: '5'},
      {label: '超市', value: '6'},
      {label: '菜场', value: '7'},
      {label: '医院', value: '8'}
    ];

    let credential = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.credential,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        console.log(files)
        let imgList = _me.state.imgList;
        let status = files.file.status
        let credentialArr = _me.state.credentialArr;
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'credential', url: img});
          credentialArr.push({type: 'credential', url: img});
          if(files.fileList.length == credentialArr.length){
              _me.setImgUrl(imgList);
          }
          
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        console.log(file)
        _me.deleteImg(file)
      }
    };
    let appearance = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.appearance,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        console.log(files)
        let imgList = _me.state.imgList;
        let status = files.file.status;
        let appearanceArr = _me.state.appearanceArr;
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'appearance', url: img})
          appearanceArr.push({type: 'appearance', url: img})
           if(files.fileList.length == appearanceArr.length){
              _me.setImgUrl(imgList);
          }
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        console.log(file)
        _me.deleteImg(file)
      }
    };
    let apartment = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.apartment,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        let imgList = _me.state.imgList;
        let status = files.file.status;
        let apartmentArr = _me.state.apartmentArr;
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'apartment', url: img})
          apartmentArr.push({type: 'apartment', url: img})
           if(files.fileList.length == apartmentArr.length){
              _me.setImgUrl(imgList);
          }
 
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        console.log(file)
        _me.deleteImg(file)
      }
    };

    let contract = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.contract,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        let imgList = _me.state.imgList;
        let status = files.file.status;
         let contractArr = _me.state.contractArr;
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'contract', url: img})
          contractArr.push({type: 'contract', url: img})
           if(files.fileList.length == contractArr.length){
              _me.setImgUrl(imgList);
          }
        }

      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        console.log(file)
        _me.deleteImg(file)
      }
    };

    let other = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.other,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {
        let imgList = _me.state.imgList;
        let status = files.file.status;
        let otherArr = _me.state.otherArr;
        if (status == 'done') {
          let file = files.file;
          let img = file.response ? file.response.data : '';
          imgList.push({type: 'other', url: img})
          otherArr.push({type: 'other', url: img})
           if(files.fileList.length == otherArr.length){
              _me.setImgUrl(imgList);
          }
        }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        console.log(file)
        _me.deleteImg(file)
      }
    };

    let bankItem = bankJson.map((item) => {
      return (
        <Option key={`item-${item.code}`} value={item.code}>{item.name}</Option>
      )
    })

    // const disabledDate = function (current) {
    //   let key = _me.state.startTime.getTime();
    //   return current && current.getTime() < key;
    // };
    let forms = this.props.form.getFieldsValue();
    console.log(forms)
    let rent = forms.rent ? forms.rent : '';
    let startTime = forms.startTime ? Utils.formatDate(forms.startTime) : '' ;
    let contractPeriod = forms.contractPeriod ? parseInt(forms.contractPeriod) : '';
    let startTimeYear = startTime == '' ? '' :  Number(startTime.split("-")[0]);
    let startTimeMonth = startTime == '' ? '' : Number(startTime.split("-")[1]);
    let startTimeDay = startTime == '' ? '' : Number(startTime.split("-")[2]);
    console.log(startTimeYear,startTimeMonth,startTimeDay)
    // let qixianYear =parseInt(qixian/12);
    // let qixianMonth = qixian>12 ? (qixian%12) : qixian;
    let endTimeYear = '';
    let endTimeMonth = '';
    let endTimeDay = '';
    console.log(contractPeriod)
    if(contractPeriod > 12) {
      // let endTimeYear = parseInt(qixian/12) + startTimeYear;
      // let endTimeMonth = (startTimeMonth + (qixian%12)) > 12 ? endTimeYear+1 : 
      if((startTimeMonth + contractPeriod%12) > 12) {
          endTimeYear = startTimeYear + parseInt(contractPeriod/12) + 1;
           endTimeMonth = (startTimeMonth + contractPeriod%12)%12 === 0 ? 12 : (startTimeMonth + contractPeriod%12)%12
           endTimeDay = startTimeDay - 1;
      }else {
         endTimeYear = startTimeYear +  parseInt(contractPeriod/12)
         endTimeMonth = startTimeMonth + contractPeriod%12
         endTimeDay = startTimeDay - 1;
      }
    }else {
      if(startTimeMonth + contractPeriod > 12) {
        endTimeYear = startTimeYear + 1;
       endTimeMonth = (startTimeMonth + contractPeriod%12)%12
       endTimeDay = startTimeDay - 1;
      }else {
         endTimeYear = startTimeYear;
        endTimeMonth = startTimeMonth + contractPeriod%12
        endTimeDay = startTimeDay - 1;
      }
    }

    if(startTimeDay == 1 && startTimeMonth == 1 && contractPeriod%12 == 0) {
          endTimeYear = startTimeYear - 1;
          endTimeMonth = 12;
          endTimeDay = 31;
    }else if(startTimeDay == 1 && startTimeMonth == 2 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31;
    }else if (startTimeDay == 1 && startTimeMonth == 3 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          if(endTimeYear%4 == 0 && endTimeYear%100 !== 0 ||endTimeYear%400 == 0) {
              endTimeDay = 29;
          }else {
            endTimeDay = 28;
          }
          
    }else if (startTimeDay ==1 && startTimeMonth == 4 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31
    }else if (startTimeDay ==1 && startTimeMonth == 5 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 30
    }else if (startTimeDay ==1 && startTimeMonth == 6 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31
    }else if(startTimeDay ==1 && startTimeMonth == 7 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 30
    }else if (startTimeDay ==1 && startTimeMonth == 8 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31
    }else if (startTimeDay ==1 && startTimeMonth == 9 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31
    }else if (startTimeDay ==1 && startTimeMonth == 10 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 30
    }else if (startTimeDay ==1 && startTimeMonth == 11 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 31
    }else if(startTimeDay ==1 && startTimeMonth == 12 && contractPeriod%12 == 0) {
          endTimeMonth = startTimeMonth - 1;
          endTimeDay = 30
    }

    let expireTime =  endTimeYear + '-' +  (endTimeMonth < 10 ? '0'+endTimeMonth : endTimeMonth) + '-' +  (endTimeDay < 10 ? '0'+endTimeDay : endTimeDay)
    console.log(expireTime)

    // let startTime = forms.startTime ? parseInt(forms.startTime) : null;
    // console.log(startTime)
    // let startTimeReg = forms.startTime.replace(new RegExp('-', 'gm'), '/') ;
    // let startTimes = (new Date(startTimeReg)).getTime();
    // let contractPeriod = forms.contractPeriod ? parseInt(forms.contractPeriod) : '';
    // console.log(startTimes)

    let totals = 0
    let contractRecord = this.state.contractList ? this.state.contractList : []
    contractRecord.map((item)=> {
           totals +=item.totalRent
    })

    const typeProps = getFieldProps('type', {
      initialValue: 'rent',
      rules: [
        {required: true, message: '请选择房源所有权'},
      ],
      onChange:this.handleChangeType
    })
    return (
      <div>
        <Form inline form={this.props.form}>
          <div className="form-group">
            <h3><span>基本信息</span></h3>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="业主姓名">
                  <Input {...getFieldProps('ownerName', {rules: [
                    { required: true,  message: '业主姓名不可为空' },
                    {validator: Utils.name}
                  ]})}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="联系电话">
                  <Input {...getFieldProps('mobilePhone', {rules: [
                    { required: true,  message: '联系电话不可为空' },
                    {validator: Utils.phone}]
                    })}/>
                </FormItem>
              </Col>
                    <Col sm={8}>
                <FormItem label="身份证号码">
                  <Input {...getFieldProps('ownerNo')} />
                </FormItem>
              </Col>
              
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="房屋户型">
                  <Select defaultValue="1" {...getFieldProps('bedroomCount', {initialValue: '1',rules:[{required: true}]})} style={{width: 47}}>
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>室</span>
                  <Select defaultValue="1" {...getFieldProps('hallCount', {initialValue: '1'})} style={{width: 47}}>
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>厅</span>
                  <Select defaultValue="1" {...getFieldProps('toiletCount', {initialValue: '1'})} style={{width: 47}}>
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>卫</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="房屋楼层">
                  <span>第</span>
                  <Input {...getFieldProps('floor',
                    {initialValue:'1',rules:[{required: true,message: '请输入楼层',validator: this.floor}]})}
                    autoComplete="off" style={{width: 50}}
                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                    style={{width: 50}}/>
                  <span>层，</span>

                </FormItem>
                <FormItem>
                  <span>共</span>
                  <Input {...getFieldProps('totalFloor', {initialValue:'1',
                    rules: [{whitespace: true, message: '请输入总楼层'}, {validator: this.totalFloor}]})}
                    autoComplete="off" style={{width: 50}}
                    onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  />

                  <span>层</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="装修情况">
                  <Select defaultValue="1"  {...getFieldProps('decorate', {initialValue: '1'})} style={{width: 162}}>
                    <Option value="1">毛坯</Option>
                    <Option value="2">简装</Option>
                    <Option value="3">豪华</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="物业名称">
                  <Input placeholder="示例:旭江华庭"  {...getFieldProps('tenementName', {rules: [
                    { required: true,  message: '物业名称不可为空' },{validator: Utils.company }]})} />
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="房屋朝向">
                  <Select defaultValue="0" {...getFieldProps('orientation', {initialValue: '0',rules:[{required: true}]})} style={{width: 162}}>
                    <Option value="0">坐北朝南</Option>
                    <Option value="1">坐南朝北</Option>
                    <Option value="2">坐西朝东</Option>
                    <Option value="3">坐东朝西</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="梯户比例">
                  <Select defaultValue="1" {...getFieldProps('elevatorCount', {initialValue: '1'})} style={{width: 70}}>
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>梯</span>
                  <Select defaultValue="1" {...getFieldProps('familyCount', {initialValue: '1'})} style={{width: 70}}>
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>户</span>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="房屋面积">
                  <Input {...getFieldProps('area', {rules: [
                    { required: true,  message: '房屋面积不可为空' },{validator: Utils.floatNum}]})} style={{width: 162}}/>
                  <span>㎡</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="是否有电梯">
                  <Select defaultValue="1" {...getFieldProps('isElevator', {initialValue: '1'})} style={{width: 162}}>
                    <Option value="1">是</Option>
                    <Option value="-1">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="阳台数量">
                  <Input defaultValue={0} {...getFieldProps('balconyCount', {rules: [
                  {validator: Utils.number}]})}/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="建筑类型">
                  <Select defaultValue="build1" {...getFieldProps('buildTypeNid', {initialValue: 'build1'})} style={{width: 162}}>
                    <Option value="build1">板楼</Option>
                    <Option value="build2">独栋</Option>
                    <Option value="build3">塔楼</Option>
                    <Option value="build4">联排</Option>
                    <Option value="build5">叠拼</Option>
                    <Option value="build6">板塔结合</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="物业编号">
                  <Input {...getFieldProps('tenementNo')}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="房源所有权">
                  <Select {...typeProps}
                   style={{width: 162}}
                  >
                    <Option key="rent" value="rent">租赁</Option>
                    <Option key="own" value="own">自有</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={24}>
                <div className="ant-form-item">
                  <label className="ant-form-item-required">房源地址</label>
                  <div className="">
                    <div className="ant-form-item-control ">
                      <Region areaId={this.state.areaId} ref="region" onAreaChange={this.changeAreaId}/>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={23} style={{marginLeft: 90}}>
                <FormItem>
                  <Input placeholder="示例:东直门外新中街阳光都市3-1302" {...getFieldProps('address', {rules: [
                    { required: true,  message: '房源地址不可为空' }]})} style={{width: 550,'marginLeft':5}}/>&nbsp;&nbsp;
                  <Button type="primary" className="ant-btn ant-btn-ghost ant-btn-lg" onClick={this.getLocation}>获取地址</Button>&nbsp;&nbsp;
                  x：<Input {...getFieldProps('xAxis', )} style={{width: 100}} />&nbsp;&nbsp;
                  y：<Input {...getFieldProps('yAxis', )}  style={{width: 100}}/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={23}>
                <div className="ant-form-map">
                  <div class="map" id="allmap" className="ant-form-map-style"></div>
                </div>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={24}>
                <FormItem label="周边配套">
                  <CheckboxGroup options={options} onChange={this.handleCheckBox}/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={24}>
                <FormItem label="备注">
                  <Input type="textarea" style={{width: 600}} {...getFieldProps('remark')}/>
                </FormItem>
              </Col>
            </Row>
          </div>
          <div className="form-group">
            <h3><span>账户管理</span></h3>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="业主开户银行">
                  <Select defaultValue="102" {...getFieldProps('bankName', {initialValue: '102'})} style={{width: 162}}>
                    {bankItem}
                  </Select>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="银行网点">
                  <Input {...getFieldProps('bankBranch')}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="银行账户">
                  <Input {...getFieldProps('bankAccount')}/>
                </FormItem>
              </Col>

            </Row>
            <Row gutter={24}>
               <Col sm={8}>
                <FormItem label="支付宝">
                  <Input {...getFieldProps('alipayName')}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="业主户名">
                  <Input {...getFieldProps('accountName')}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="电表户号">
                  <Input {...getFieldProps('ammeterAmt')}/>
                </FormItem>
              </Col>
              
            </Row>
            <Row gutter={24}>
            <Col sm={8}>
                <FormItem label="水表户号">
                  <Input {...getFieldProps('watermeterAmt')}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="燃气是否开通">
                  <Select defaultValue="1" {...getFieldProps('isNatgas', {initialValue: '1'})} style={{width: 162}}>
                    <Option value="1">是</Option>
                    <Option value="-1">否</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="门禁密码">
                  <Input {...getFieldProps('doorPwd')}/>
                </FormItem>
              </Col>
              
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="车位号">
                  <Input {...getFieldProps('carportNo')}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="宽带账号">
                  <Input {...getFieldProps('broadbandNo')}/>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="宽带密码">
                  <Input {...getFieldProps('broadandPwd')}/>
                </FormItem>
              </Col>
            </Row>
          </div>
          {
            this.state.isOwn ? '': 
            <div className="form-group">
              <h3><span>租赁信息</span></h3>
              <Row gutter={24}>
                  <Col sm={8}>
                  <FormItem label="付款方式">
                    <Select defaultValue="1" {...getFieldProps('paymentWay',{ initialValue: '1', onChange: this.changeWay})}
                            style={{width: 162}}>
                      <Option value="1">固定</Option>
                      <Option value="-1">不固定</Option>
                    </Select>
                  </FormItem>
                </Col>
            
              <Col sm={8}>
                    <FormItem label="房屋租金">
                      <Input {...getFieldProps('rent', {
                        rules: [{ required: this.state.isOwn ? false : (this.state.isFixed ? false : true),  message: '房屋租金不可为空' }, {validator: this.state.isOwn ? '' :Utils.floatNum}]})}/>元/月
                    </FormItem>
                </Col>

              
                <Col sm={8}>
                  <FormItem label="业主收款渠道">
                    <Select defaultValue="alipay" {...getFieldProps('collectNid', {initialValue: 'alipay'})} style={{width: 162}}>
                      <Option value="alipay">支付宝</Option>
                      <Option value="cashpay">现金</Option>
                      <Option value="bankpay">银行转账</Option>
                      <Option value="qqpay">微信</Option>
                      <Option value="4">其它</Option>
                    </Select>
                  </FormItem>
                </Col>
            
              </Row>
              <Row gutter={24} >
                <Col sm={8}>
                  <FormItem label="合约开始日期">
                    <DatePicker style={{width: 162}}
                      {...getFieldProps('startTime', {onChange: this.handleTime, rules: [{ required: this.state.isOwn ? false : (this.state.isFixed ? false : true), type: 'date',  message: '合约开始日期不可为空' }]})}
                                />
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem label="租赁期限(月)">
                      <Input {...getFieldProps('contractPeriod',{rules: [{required: this.state.isOwn ? false : true, message: '租赁期限不能为空'}]})}/>
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem label="合约结束日期">
              
                    
                    <DatePicker style={{width: 162, display: 'none'}}
                      {...getFieldProps('expireTime', {initialValue:  forms.startTime && contractPeriod ? expireTime : null })}
                                disabled />
                    <DatePicker style={{width: 162}}
                      disabled value={forms.startTime && contractPeriod ? expireTime : null}/>
                
              
                    <Button className="ant-btn-icon" onClick={this.add} style={{display: `${this.state.isFixed ? 'inLine' : 'none' }`}}><Icon type="plus" /></Button>
                  </FormItem>
                </Col>
              </Row>

              {this.state.isFixed ? <Collapse  accordion onChange={this.handleCollapse} activeKey={this.state.activeKey}>
                <Panel header={'合约租金项'} key="1">
                  <ItemTable record={this.state.contractList} synchronMethod={this.synchronData}/>
                </Panel>
              </Collapse> : null}

              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="是否需要押金">
                    <Select defaultValue="1" {...getFieldProps('isDeposit', {initialValue: '1', onChange: this.handleDeposit})} style={{width: 162}} >
                      <Option value="1">是</Option>
                      <Option value="-1">否</Option>
                    </Select>
                  </FormItem>
                </Col>
            
                <Col sm={8}>
                  <FormItem label="房屋押金">
                    <Input {...getFieldProps('deposit', {initialValue: '0.00',
                      rules: [{validator: Utils.floatNum}]})} disabled={this.state.depositEnable}/>
                  </FormItem>
                </Col>
                {this.state.isFixed ?   
                  <Col sm={8}>
                    <FormItem label="租金总计">
                    {this.state.isFixed ? <Input disabled value={totals}/> : <Input value={rent && contractPeriod ? rent * contractPeriod : ''} disabled/>}元
                      
                    </FormItem>
                </Col>
                  :
                    <Col sm={8}>
                  <FormItem label="房屋付款周期">
                    <Select  {...getFieldProps('rentPeriod', {initialValue: '3'})}
                            style={{width: 162}} >
                      <Option value="3">季</Option>
                      <Option value="6">半年</Option>
                      <Option value="12">年</Option>
                    </Select>
                  </FormItem>
                </Col>  
                }
              </Row>
              <Row gutter={24}>
              {!this.state.isFixed ?
                <Col sm={8}>
                    <FormItem label="租金总计">
                    {this.state.isFixed ? <Input disabled value={totals}/> : <Input value={rent && contractPeriod ? rent * contractPeriod : ''} disabled/>}元
                      
                    </FormItem>
                </Col>
                : 
                ''
              }
                
              </Row>
              <Row gutter={24}>
                <Col sm={24}>
                  <FormItem label="备注">
                    <Input type="textarea" style={{width: 600}} {...getFieldProps('cremark')}/>
                  </FormItem>
                </Col>
              </Row>
            </div>

          }
          
          <div className="form-group">
            <h3><span>房屋附件</span></h3>
            <p className="img-tips">提示：图片为png和jpg格式，且不大于5M</p>
            <Row gutter={24} className="pic-box">
              <Col sm={3}>

                <p className="label-text">房产证：</p>
              </Col>
              <Col sm={21}>
                <Upload  {...credential}>
                  <div className="img-icon">
                    <Icon type="plus"/>
                    <h5>添加图片</h5>
                  </div>
                </Upload>
              </Col>
            </Row>
            <Row gutter={24} className="pic-box">
              <Col sm={3}>
                <p className="label-text">租赁合同：</p>
              </Col>
              <Col sm={21}>
                <Upload  {...contract}>
                  <div className="img-icon">
                    <Icon type="plus"/>
                    <h5>添加图片</h5>
                  </div>
                </Upload>
              </Col>
            </Row>
            <Row gutter={24} className="pic-box">
              <Col sm={3}>

                <p className="label-text">小区外观图：</p>
              </Col>
              <Col sm={21}>
                <Upload  {...appearance}>
                  <div className="img-icon">
                    <Icon type="plus"/>
                    <h5>添加图片</h5>
                  </div>
                </Upload>
              </Col>
            </Row>
            <Row gutter={24} className="pic-box">
              <Col sm={3}>
                <p className="label-text">户型图：</p>
              </Col>
              <Col sm={21}>
                <Upload  {...apartment}>
                  <div className="img-icon">
                    <Icon type="plus"/>
                    <h5>添加图片</h5>
                  </div>
                </Upload>
              </Col>
            </Row>
            
            <Row gutter={24} className="pic-box">
              <Col sm={3}>
                <p className="label-text">其它：</p>
              </Col>
              <Col sm={21}>
                <Upload  {...other}>
                  <div className="img-icon">
                    <Icon type="plus"/>
                    <h5>添加图片</h5>
                  </div>
                </Upload>
              </Col>
            </Row>
          </div>
          <Row gutter={24} style={{margin: 20}}>
            <Col sm={8} offset={3}>
              <FormItem label="">
                <Button type="primary" loading={this.state.loading} onClick={this.handleSubmit}>提交</Button>
                <Button htmlType="button" onClick={this.handleBack} style={{marginLeft: 20}}>返回</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <Modal visible={this.state.priviewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" src={this.state.priviewImage} width="500"/>
        </Modal>
      </div>
    );
  }
});

Add = Form.create()(Add);
export default Add